<template>
  <div id="drawer-target">
    <n-card>
      <HeadSearch :info="search" @search="handleSearch" @reset="handleSearch" />
      <DataTable
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
        :pagination-setting="pagination"
        :checked-row-keys="selectedIds"
        @fetch-success="getTableData"
        @update:checked-row-keys="selectedIds = $event"
      >
        <!-- <template v-if="questionType === 1" #tableTitle> -->
        <template #tableTitle>
          <n-button type="primary" class="btn" :loading="loading" @click="reportHandle"> 生成报告 </n-button>
          <n-button type="primary" class="btn" :disabled="noBtn" :loading="loading" @click="confirmHandle">确认</n-button>
          <n-button type="tertiary" class="btn" :disabled="noBtn" :loading="loading" @click="ignoreHandle">忽略</n-button>
        </template>
      </DataTable>
    </n-card>
  </div>

  <ConfirmModal v-if="modalShow" v-model:visible="modalShow" :type="modalType" :data="rowData" @reload="handleSearch" />
  <PositionDrawer v-model:visible="showDraw" :data="rowData" :type="detail.type" />

</template>

<script>
import { ref, toRefs, reactive, unref, onUnmounted, watch } from 'vue'
import HeadSearch from '@/components/Search/index.vue'
import DataTable from '@/components/DataTable/index.vue'
import ConfirmModal from './components/ConfirmModal.vue'
import PositionDrawer from './components/PositionDrawer.vue'
import table from './tools/table'
import { search, getTypeList } from './tools/search'
import pagination from './tools/pagination'
import { getTaskInspection, inspectionConfirm, inspectionIgnore } from '@/api/task'
import { reportGenerate } from '@/api/report/index'

export default {
  name: 'TaskAll',
  components: { HeadSearch, DataTable, ConfirmModal, PositionDrawer },
  props: {
    detail: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    getTypeList()

    const data = reactive({
      ...toRefs(table),
      ...toRefs(search)
    })

    if (props.detail.type === 'preview') {
      data.columns = table.columns.filter(item => { !['selection', 'actionBtn'].inclueds(item.key) })
    }

    const dataList = ref([])

    // 请求接口
    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        ...res,
        inspectionId: props.detail.id
      }

      return await getTaskInspection(_params)
    }

    // 生成报告
    function reportHandle() {
      loading.value = true
      reportGenerate(props.detail.id).then(res => {
        if (res.code === 0) {
          data.handleSearch()
        } else {
          $message.error(res.msg)
        }
        loading.value = false
      }).catch(e => {
        console.log(e)
      }).finally(() => {
        loading.value = false
      })
    }

    const loading = ref(false)
    const getTableData = (list) => {
      dataList.value = list.items
    }
    // 确认
    const confirmHandle = () => {
      const tmp = dataList.value.filter(it => (it.status === 10 || it.status === 5) && selectedIds.value.includes(it.id))
      const result = tmp.map(it => it.id)
      if (result.length === 0) return
      loading.value = true
      inspectionConfirm(result.join(',')).then(res => {
        if (res.code === 0) {
          data.handleSearch()
          selectedIds.value = []
        } else {
          $message.error(res.msg)
        }
        loading.value = false
      }).catch(e => {
        console.log(e)
        loading.value = false
      })
    }

    // 忽略
    const ignoreHandle = () => {
      const tmp = dataList.value.filter(it => (it.status === 15 || it.status === 5) && selectedIds.value.includes(it.id))
      const result = tmp.map(it => it.id)
      if (result.length === 0) return
      loading.value = true
      inspectionIgnore(result.join(',')).then(res => {
        if (res.code === 0) {
          data.handleSearch()
          selectedIds.value = []
        } else {
          $message.error(res.msg)
        }
        loading.value = false
      }).catch(e => {
        console.log(e)
        loading.value = false
      })
    }

    // 选择表格数据
    const selectedIds = ref([])
    function handleCheck(rowKeys) {
      selectedIds.value = rowKeys
    }

    onUnmounted(() => {
      data.searchParams = null
      data.showDraw = false
    })

    // 生成报告、确认、忽略 的按钮能否点击
    const noBtn = ref(true)
    watch(() => selectedIds.value, (val) => {
      noBtn.value = val.length === 0
    })

    return {
      ...toRefs(data),
      reportHandle,
      getTableData,
      confirmHandle,
      ignoreHandle,
      loadDataTable,
      pagination,
      handleCheck,
      noBtn,
      loading,
      selectedIds
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer-target {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.btn {
  margin-right: 20px;
}

:deep(.n-image-preview-container __image-preview-15yo8s1),
:deep(.__image-preview-15yo8s1) {
  z-index: 2333 !important;
}
</style>
